<template>

  <el-menu
      :default-active="activeIndex2"
      class="el-menu-demo"
      mode="horizontal"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      @select="handleSelect"
  >
    <el-menu-item index="1">Processing Center</el-menu-item>
    <el-menu-item index="2" disabled>Info</el-menu-item>
    <el-menu-item index="3">About</el-menu-item>
  </el-menu>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const activeIndex2 = ref('1');
const router = useRouter();

const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
  if (key === '1') { 
    router.push({name: 'Dashboard'}); 
  }
  if (key === '3') { 
    router.push({name: 'About'}); 
  }
};
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>
